<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/3/23 22:34
 -->
<template>
  <div class="g-menu__wrap">
    <el-menu
      :mode="mode"
      :collapse="menuCollapse"
      :default-active="defaultActive"
      :default-openeds="menusDefaultOpeneds"
      :show-timeout="showTimeOut"
      :collapse-transition="false"
      v-bind="$attrs"
      menu-trigger="hover"
      @open="_addMenusDefaultOpeneds"
      @close="_removeMenusDefaultOpeneds"
      v-on="$listeners"
    >
      <template v-for="item in _menus">
        <template v-if="item.children">
          <!--一级菜单-->
          <el-submenu :key="item.key" :index="String(item.index)" class="menu_1">
            <template slot="title">
              <el-badge v-if="newMenu.includes(item.title)" value="新" class="g-new-badge" type="warning"></el-badge>
              <i :class="[_iconfont, item.icon]" :style="item.style"></i><span>{{ item.title }}</span>
            </template>
            <!--二级菜单-->
            <template v-for="subItem in item.children">
              <el-submenu v-if="subItem.children" :key="subItem.key" :index="String(subItem.index)" class="menu_2">
                <template slot="title">
                  <i :class="[_iconfont, subItem.icon]" :style="subItem.style"></i>
                  <span class="g-menu-title-label">{{ subItem.title }}</span>
                </template>
                <!--三级菜单-->
                <template v-for="threeItem in subItem.children">
                  <el-submenu
                    v-if="threeItem.children"
                    :key="threeItem.key"
                    :index="String(threeItem.index)"
                    class="menu_3"
                  >
                    <template slot="title">
                      <i :class="[_iconfont, threeItem.icon]" :style="threeItem.style"></i>
                      <span class="g-menu-title-label">{{ threeItem.title }}</span>
                    </template>
                    <!--四级菜单-->
                    <template v-for="fourItem in threeItem.children">
                      <el-submenu
                        v-if="fourItem.children"
                        :key="fourItem.key"
                        :index="String(fourItem.index)"
                        class="menu_4"
                      >
                        <template slot="title">
                          <i :class="[_iconfont, fourItem.icon]" :style="fourItem.style"></i>
                          <span class="g-menu-title-label">{{ fourItem.title }}</span>
                        </template>
                      </el-submenu>
                      <el-menu-item
                        v-else
                        :key="fourItem.key"
                        :index="String(fourItem.index)"
                        class="menu_4-item"
                        @click.native="routerTo(fourItem)"
                      >
                        <i :class="[_iconfont, fourItem.icon]" :style="fourItem.style"></i>
                        <span class="g-menu-title-label">
                          {{ fourItem.title }}
                        </span>
                      </el-menu-item>
                    </template>
                  </el-submenu>
                  <el-menu-item
                    v-else
                    :key="threeItem.key"
                    :index="String(threeItem.index)"
                    class="menu_3-item"
                    @click.native="routerTo(threeItem)"
                  >
                    <i :class="[_iconfont, threeItem.icon]" :style="threeItem.style"></i>
                    <span class="g-menu-title-label">{{ threeItem.title }}</span>
                  </el-menu-item>
                </template>
              </el-submenu>
              <el-menu-item
                v-else
                :key="subItem.key"
                :index="String(subItem.index)"
                class="menu_2-item"
                @click.native="routerTo(subItem)"
              >
                <i :class="[_iconfont, subItem.icon]" :style="subItem.style"></i>
                <span class="g-menu-title-label">{{ subItem.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>

        <!--没有任何子菜单-->
        <template v-else>
          <el-menu-item
            :key="item.key"
            :index="String(item.index)"
            class="single-item menu_1-item"
            @click.native="routerTo(item)"
          >
            <i :class="[_iconfont, item.icon]"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { sync, call, get } from 'vuex-pathify'
import { isObject } from '@bianpengfei/utils'
export default {
  inheritAttrs: false,
  props: {
    mode: {
      type: String,
      default: 'vertical'
    },

    menuCollapse: {
      type: Boolean,
      default: false
    },

    menus: {
      type: Array,
      default: () => []
    },

    defaultActive: {
      type: String,
      default: ''
    },

    menusDefaultOpeneds: {
      type: Array,
      default: () => []
    },

    showTimeOut: {
      type: Number,
      default: 100
    }
  },

  data() {
    return {
      newMenu: ['线索潜客管理']
    }
  },

  computed: {
    _iconfont: get('app/iconfont'),
    _menus() {
      return this.loopMenusAttrs(JSON.parse(JSON.stringify(this.menus)))
    }
  },

  methods: {
    _addMenusDefaultOpeneds: call('app/addMenusDefaultOpeneds'),
    _removeMenusDefaultOpeneds: call('app/removeMenusDefaultOpeneds'),

    routerTo(item) {
      this.$emit('onClickMenuItem', item)
    },

    loopMenusAttrs(menus = []) {
      menus = menus
        .filter((v) => !v.meta?.hidden)
        .map((v, vi) => {
          v.index = v.path || v.fullPath || v.ID
          if (isObject(v.meta)) {
            Object.keys(v.meta).forEach((key) => {
              v[key] = v.meta[key]
            })
            delete v.meta
          }
          if (v?.isSingle) {
            v.index = v.redirect
            delete v.children
          }
          v.key = `${vi}${Math.random().toString(32).substring(2)}${Math.random().toString(32).substring(2)}`
          if (v.children && Array.isArray(v.children)) {
            // v.children = v.child
            // delete v.child
            v.children = this.loopMenusAttrs(v.children)
          }
          return v
        })
      return menus
    }
  }
}
</script>
